<template>
  <div class="index">
    <Home v-if="active == 0"></Home>
    <Mine v-else></Mine>
    <van-tabbar v-model="active" :fixed="true">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item>
        <span>我的</span>
        <template #icon="props">
          <img :src="props.active ? mine.active : mine.inactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script setup lang="ts">
import Home from "./home.vue";
import Mine from "./mine.vue";
import { onMounted, ref } from "vue";

const active = ref(0);
const mine = {
  active: "https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png",
  inactive: "https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png",
};

onMounted(() => {
  console.log("index,onMounted");
});
</script>
<style lang="scss" scoped>
.index {
  width: 100vw;
  height: 100%;
  min-height: 800px;
  background-color: #f8f8f8;
}
</style>